import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { Search } from 'react-vant';
import { DownFill, BellOutline } from 'antd-mobile-icons'
import { PullRefresh, List, Tabs, Cell, Toast } from 'react-vant'
import { useNavigate } from 'react-router-dom';
import Tu from '../../../components/Tu/index'
import Yi from '../../../components/Yi/index'
import Gua from '../../../components/Gua/index'
import Ke from '../../../components/Ke/index'
import Ai from '../../../components/Ai/index'
import Swo from '../../../components/Swo/index'
import axios from '../../../utils/index'
import './index.css'
const Index: React.FC = () => {
       const navigate = useNavigate()
    const [lista, setLista] = useState<any>([])
    const [finished, setFinished] = useState<boolean>(false)
    const [isRefreshing, setIsRefreshing] = useState<boolean>(false)
    const aaa = async () => {
        const res = await axios.get('/api/list')
    if (res.data.code === 200) {
      setLista(res.data.list);
      console.log(res.data.list);
    }
  };

    useEffect(() => {
        aaa()
    }, [])
       useEffect(() => {
      const  intervalIdRef = setInterval(aaa, 5000);
        return () => clearInterval(intervalIdRef);
    }, []);
  const ding = () => {
    navigate("/ding");
  };
  const xq = (item: any) => {
    navigate(`/detail/` + item.id, { state: { item } });
  };

    const onLoad = useCallback(async () => {
        const res = await axios.get('/api/list');
        setTimeout(() => {
            if (res.data.code === 200) {
                setLista([...lista, ...res.data.list]);
            }
        }, 5000)
    }, [lista]);


    const onRefresh = useCallback(async () => {
        setIsRefreshing(true);
        try {
            await aaa();
        } catch (error) {
        } finally {
            setIsRefreshing(false);
        }
    }, []);

    const xi = () => {
        navigate('/xi')
    }
    const mn = () => {
        navigate('/doctor')
    }

    const cs = localStorage.getItem('city')
    const cscs = localStorage.getItem('cityinfo')
    console.log(cs, cscs);

    return <div>
        <PullRefresh pullingText="下拉刷新" onRefresh={onRefresh} successText='刷新成功' >
            <span className='ling' onClick={xi}><BellOutline /></span>
            <div className='aa'>
                <h3 onClick={ding}>健康{cs}</h3><span className='bb'><DownFill /></span>
                <Search clearable shape="round" placeholder="找医生、找医院" />
            </div>

            <Gua></Gua>

            <Tu></Tu>

            <div className='oo7' onClick={()=>navigate('/control')}>
                <img src="../src/assets/608.jpg" alt="" style={{ width: '100%', height: '100%', }} />
            </div>

            <Yi></Yi>

            <div className='m7'>
                <p className='y1'><h2 className='y2'>我的医生</h2> 我看过的医生 随时联系</p>
                <div className='y3' onClick={mn}>
                    <img src="../src/assets/100_03.jpg" alt="" style={{ height: '100%' }} />
                    <div>
                        <h3 className='y4'><span style={{ color: '#000' }}>李凤娇</span> 住院医生</h3>
                        <p className='y5'><span style={{ color: '#ccc' }}>北京京都儿童医院</span> <span style={{ color: '#ccc' }}>皮肤病</span></p>
                    </div>
                </div>
            </div>

            <Ke></Ke>

            <Ai></Ai>

            <Swo></Swo>

            <List finished={finished} onLoad={onLoad} finishedText="没有更多了">
                {
                    lista.length > 0 && lista.map((item: any, index: number) => (
                        <div key={index} onClick={() => xq(item)}>
                            <div className='xuan'>
                                <h2 className='wen'>{item.title}</h2>
                                <div className='quan'>
                                    <div className='li'>
                                        <img src={item.img2} alt="" style={{ width: '50px', height: '50px' }} />
                                        <div>
                                            <p className='wei1'>{item.wei}</p>
                                            <p className='wei2'>{item.mai}</p>
                                        </div>
                                    </div>
                                    <div className='li1'>
                                        <img src={item.img1} alt="" style={{ width: '100px', height: '100px' }} />
                                    </div>
                                </div>
                                <div className='yue'>{item.count} 阅读</div>
                            </div>
                        </div>
                    ))
                }
            </List>
        </PullRefresh>
    </div>
}
export default Index;
